<script setup lang="ts">
import  post  from "@/lib/post.ts";
import { ElMessageBox } from "element-plus";
import { ref } from "vue";

const option = ref(null as any); // 地图

const getNativeStatics = async () => {
  // 获取籍贯的统计
  // { _id: "$native.province", count: { $sum: 1 } }
  const data = await post("/statics/member", { groupKey: "native.province" });
  if (!data.success) {
    return ElMessageBox.alert(data.message);
  }
  const list = data.result.list.map((o: any)=>({ name: o.label, value: o.value }));
  option.value = {
    title: {
      text: "籍贯分布图",
      subtext: "人员信息",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{c}(人)",
    },
    visualMap: {
      min: 0,
      max: 5,
      text: ["高", "低"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["lightskyblue", "yellow", "orangered"],
      },
    },
    series: [
      {
        name: "籍贯分布图",
        type: "map",
        map: "CHINA",
        label: {
          show: false,
          formatter: "{b}({c})",
        },
        data: list,
      },
    ],
  };
};

getNativeStatics();
</script>

<template>
  <v-chart :option="option"></v-chart>
</template>

<style scoped>
</style>